﻿@model TestOnlineProject.Models.Entities.Test
@{
    ViewBag.Title = "TestQuestions";
}
<script>

$(document).ready(function () {

        // Initial page.
        goToPage(1, @ViewBag.totalPage);

        });

    // Goto Page.
    function goToPage(page, totalPage) {
        $(".question").hide();
        $(".p" + page).show();
    }
</script>
<div class="site_map">
    @Html.ActionLink("Home", "Index", "Home") / @Html.ActionLink("Subjects", "Index", "Subject", new { }, null)
    / <span style="word-wrap: break-word">@Html.ActionLink(Model.Subject.Code, "Details", "Subject", new { id = Model.SubjectId }, null)</span>
    /
    @Html.ActionLink("Tests", "Index", "Test", new { subjectId = Model.SubjectId }, null)
    / <span style="word-wrap: break-word">
        @Html.ActionLink(Model.Title, "Details", "Test", new { id = Model.TestId }, null)
    </span>/ Test Questions
</div>
<br />
<div class="main_nav">
    <span><a href="@Url.Content("~/Test/Details")?id=@Model.TestId">
        <img src="@Url.Content("~/Images/back button.png")" style="height:30px"/></a>
</div>
<br />
@{
    if (Model.TestQuestions.Where(tq => tq.Question.IsActivated).Count() > 0)
    {
        var totalPage = 0;
        int pos = -1;
        foreach (var item in Model.TestQuestions.Where(q => q.Question.IsActivated))
        {
            pos++;
            if (pos % 10 == 0)
            {
                totalPage++;
            }
            var pageClass = "p" + totalPage;

            var question = item.Question;
            
    <table class="table table-bordered @pageClass question" style="table-layout: fixed">
        <tr>
            <td style="width: 150px; text-align: right">
                <span>Question
                    @(pos + 1)
                </span>
            </td>
            <td>
                <span style="word-wrap: break-word">
                    @Html.ActionLink(item.Question.Title, "Details", "Question", new { id = item.QuestionId }, new { target = "_blank" })
                </span>
            </td>
        </tr>
    </table>
        }
    <table width="100%">
        <tr>
            <td>
                <div>
                    <span>Page: </span><span id="page">1</span><span>/@ViewBag.totalPage</span>
                </div>
                <div id="page-selection">
                </div>
                <script>
                            $('#page-selection').bootpag({
                                total: @totalPage,
                            }).on("page", function (event, num) {
                                goToPage(num, @totalPage);
                                $("#page").html(num);
                            });
                </script>
            </td>
        </tr>
    </table>
    }
    else
    {
    <div style="padding-left: 5px">
        Empty.</div>
    }
}
